<template>
    <header class="toolbar">
        <div class="left">
            <div class="logo">
                <img src="../../assets/logo.png" alt="工具箱">
            </div>
            <toolbar-menu></toolbar-menu>
        </div>
        <div class="right">
            <toolbar-window-operation></toolbar-window-operation>
        </div>
    </header>
</template>

<script type="text/ecmascript-6">
  import ToolbarMenu from "./ToolbarMenu";
  import ToolbarWindowOperation from "./ToolbarWindowOperation";

  /**
   * @author 白雨浓
   * @date 2019/1/9 16:33
   *
   * Toolbar
   **/
  export default {
    name: 'Toolbar',
    components: {ToolbarWindowOperation, ToolbarMenu},
    data() {
      return {
        loading: false,
      }
    },
    created() {
    },
    mounted() {
      this.$nextTick(() => {
      })
    },
    methods: {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    tw = 100%
    th = 30px
    .toolbar {
        position fixed
        z-index 999
        display flex
        justify-content space-between
        align-items center
        width tw
        height th
        line-height th
        color #ccc
        background-color #505050
        user-select none
        -webkit-app-region drag
    }

    .left {
        display flex
        justify-content space-around
        justify-items center
    }

    .logo {
        display inline-block
        width th
        height th
        line-height th
        padding-left 8px
        padding-top 4px
        -webkit-app-region no-drag

        img {
            width w = 20px
            height w
            -webkit-app-region no-drag
        }
    }
</style>
